<template>
<div style="width: 1200px;margin: 0 auto">
    <el-row>
      <el-card>
        <el-col :span="12" >
          <div class="grid-content bg-purple">
            <div class="block">
              <img :src="list.imgUrl" style="width: 550px;">
            </div>

          </div>
        </el-col>
        <el-col :span="12" >
          <div class="grid-content bg-purple-light" style="margin-top: 10px;margin-bottom: 20px">
            <span style="font-size: 25px;color: #0f294d;font-weight: bold">{{list.name}}{{list.level}}</span>
            <el-divider></el-divider>
            <p style="font-size: 17px;color: #455873"><i class="el-icon-location-outline" style="margin-right: 10px"/>{{ list.address }}</p>
            <el-divider></el-divider>
            <p style="font-size: 17px;color: #455873"><span class="intro"><i class="el-icon-office-building" style="margin-right: 10px"/>{{ list.intro }}</span></p>
            <el-divider></el-divider>
            <el-date-picker
                v-model="date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"

                @change="dateChange"
                :picker-options="{ disabledDate: disabledDate }">
            </el-date-picker>
            <span style="margin-left: 30px">居住：{{ dateDiff }} 天</span>
          </div>

        </el-col>
      </el-card>

      <el-card>
        <div>
          <el-card v-for=" r in room">
            <div>
                <div style="float: left">
                    <img style="width: 200px;height: 110px;" :src="r.imgUrl">

                    <div style="text-align: left;font-weight: bold" ><span style="color: #0f294d;font-size: 20px" >{{r.roomName}}</span></div>
                    <div class="roompanel-facility-desc" style="width: 200px;font-size: 15px">
                      {{r.intro}}
                    </div>
                </div>

                  <div style="float: left;margin-top: 50px">
                      <i style="margin-left: 80px" class="el-icon-user-solid"></i>
                      <i style="margin-left: 5px" class="el-icon-user-solid"></i>
                      <el-popover
                          style="margin-top: 0;margin-left: 30px;"
                          placement="top-start"
                          width="200"
                          trigger="hover"
                          content="加餐信息：西式、中式早餐 ￥48.00 / 人">
                        <el-tag slot="reference" >无早餐</el-tag>
                      </el-popover>
                    <el-popover
                        style="margin-top: 0;margin-left: 30px;"
                        placement="top-start"
                        width="200"
                        trigger="hover"
                        content="预订此房型后可快速确认订单">
                      <el-tag slot="reference">立即确认</el-tag>
                    </el-popover>
                    <el-popover
                        style="margin-top: 0;margin-left: 30px;"
                        placement="top-start"
                        width="200"
                        trigger="hover"
                        content="订单预订成功后不可取消。若未入住将收取您全额房费（如用优惠券则以券后支付价为准）。
                        订单需等酒店或供应商确认后生效，订单确认结果以邮件或app通知为准，如订单不确认将全额退款至您的付款账户。">
                      <el-tag slot="reference">不可取消</el-tag>
                    </el-popover>
                      <span style="margin-left: 100px;color:#409EFF;font-size: 20px"> ￥{{r.price}}/天</span>
                  </div>
                  <el-button style="margin-right: 80px;margin-top:50px;float: right" type="warning" @click="goToPay(r)">预定</el-button>
            </div>
          </el-card>

        </div>
      </el-card>

    </el-row>

  </div>
</template>

<script>

import moment from 'moment';
export default {
  name: "DetailsView",
  data() {
    return {

      startDate: new Date(),
      endDate: new Date(),
      dateDiff: 1,
      date:[],
      list: {},
      room:[],
      activeIndex: '1',
    }
  },
  methods: {
    dateChange(){
      this.startDate=this.date[0];
      this.endDate=this.date[1];
      console.log(this.startDate)
      console.log(this.endDate)
      if(this.startDate.getTime()===this.endDate.getTime()){
        let day = new Date(this.startDate.getTime());
        day.setDate(day.getDate()+1);//设置为后一天
        this.endDate = new Date(day);
        this.date[1]=this.endDate;
      }
      this.calculateDateDiff();
    },
    disabledDate(time) {
      const currentDate = new Date();
      return time.getTime() < currentDate.setHours(0, 0, 0, 0); // 禁用当前时间之前的日期
    },
    // 计算日期差异的逻辑
    calculateDateDiff() {
      if (this.startDate && this.endDate) {
        const diff = moment(this.endDate).diff(moment(this.startDate), 'days');
        this.dateDiff = diff;
      } else {
        this.dateDiff = 0;
      }
    },
    goToPay(info){
      console.log(info)
      const startDate=this.formatDate(this.startDate)
      const endDate=this.formatDate(this.endDate)
      this.$router.push({name:'pay',
        params: {info:{categoryId:info.roomId,category:info.roomName,subjectId:6,dateDiff:this.dateDiff,
            subject:this.list.name,price:info.price,startDate:startDate,endDate:endDate}}})
    },

    //根据ID查询酒店详情
    select() {
      let id = new URLSearchParams(location.search).get("id");
      console.log(id)
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .get("http://localhost:8080/v1/hotels/" + id + "/list").then((response) => {
        if (response.data.code == 1) {
          this.list = response.data.data;
          console.log(this.list)
        }
      })
    },
    //根据ID查询房间详情
    selectRoom() {
      let id = new URLSearchParams(location.search).get("id");
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .get("http://localhost:8080/v1/hotels/" + id + "/selectRoom").then((response) => {
        if (response.data.code == 1) {
          this.room = response.data.data;
          console.log(this.room)
        }
      })
    },
    loadDate(){
      let now=new Date();
      this.endDate = new Date(  //获取此时年月日的后一天
          now.getFullYear(),
          now.getMonth(),
          now.getDate() + 1 //获取明天
      );
      this.date=[this.startDate,this.endDate]
      console.log(this.date)
    },
    formatDate (d) {
      var date = new Date(d);
      var YY = date.getFullYear() + '-';
      var MM =
          (date.getMonth() + 1 < 10
              ? '0' + (date.getMonth() + 1)
              : date.getMonth() + 1) + '-';
      var DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
      return YY + MM + DD;
    },
  },
  created: function () {
    this.selectRoom();
    this.select();
    this.loadDate();
  },

}
</script>

<style scoped>
.intro{
  display: -webkit-box;/*作为弹性伸缩盒子模型显示*/
  -webkit-line-clamp: 4; /*显示的行数；如果要设置2行加...则设置为2*/
  overflow: hidden; /*超出的文本隐藏*/
  text-overflow: ellipsis; /* 溢出用省略号*/
  -webkit-box-orient: vertical;/*伸缩盒子的子元素排列：从上到下*/
}
.el-tag{
  width: 98px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
}
</style>